var gulp = require('gulp'); // 引入组件 var less = require('gulp-less'), // less minifycss = require('gulp-minify-css'), // CSS压缩 uglify = require('gulp-uglify'), // js压缩 concat = require('gulp-concat'), // 合并文件 rename = require('gulp-rename'), // 重命名 clean = require('gulp-clean'); //清空文件夹 // less解析 gulp.task('build-less', function(){ gulp.src('./javis/static/less/lib/s-production.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s-skins.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s/s.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/*.less') .pipe(less()) .pipe(gulp.dest('./javis/static/build/css/')) }); // 合并、压缩、重命名css gulp.task('stylesheets',['build-less'], function() { // 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件. gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css']) .pipe(concat('all.css')) .pipe(gulp.dest('./javis/static/build/css/')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('./javis/static/build/css')); }); // 合并,压缩js文件 gulp.task('javascripts', function() { gulp.src('./javis/static/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./javis/static/build/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('./javis/static/build/js')); }); // 清空图片、样式、js gulp.task('clean', function() { return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false}) .pipe(clean({force: true})); }); // 将bower的库文件对应到指定位置 gulp.task('buildlib',function(){ gulp.src('./bower_components/angular/angular.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular/angular.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/jquery/dist/jquery.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-route/angular-route.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-animate/angular-animate.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js') .pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js') .pipe(gulp.dest('./javis/static/build/js/')) //--------------------------css------------------------------------- gulp.src('./javis/static/less/fonts/*') .pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/fonts/*') .pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css') .pipe(gulp.dest('./javis/static/build/css/lib')) }); // 定义develop任务在日常开发中使用 gulp.task('develop',function(){ gulp.run('buildlib','build-less','javascripts','stylesheets'); gulp.watch('./javis/static/less/*.less', ['build-less']); }); // 定义一个prod任务作为发布或者运行时使用 gulp.task('prod',function(){ gulp.run('buildlib','build-less','stylesheets','javascripts'); // 监听.less文件,一旦有变化,立刻调用build-less任务执行 gulp.watch('./javis/static/less/*.less', ['build-less']); }); // gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续. gulp.task('default',['clean'], function() { gulp.run('develop'); });
相关推荐
【gulp常用插件详解】 在JavaScript开发中,打包工具起着至关重要的作用,它们能够自动化构建过程,提高开发效率。Gulp是其中一个流行的构建工具,以其流式处理和易用性受到开发者们的喜爱。本文将深入探讨Gulp的...
### 四、gulp常用插件与应用场景 1. **`gulp-sass`**:用于将Sass文件编译成CSS,支持SCSS语法。 2. **`gulp-babel`**:将ES6+代码转译为ES5,便于浏览器兼容。 3. **`gulp-eslint`**:进行JavaScript代码风格...
前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源
Fangfis 模块合并 gulp 插件是针对 CMD 规范(Common Module Definition)的一个实用工具,主要用于 JavaScript 开发中的模块合并。CMD 是一种广泛应用于前端开发的模块化规范,与 AMD(Asynchronous Module ...
总之,`gulp-resolve-path`是一个实用的工具,能帮助开发者在使用Gulp构建项目时避免因文件移动而产生的路径问题,提升开发效率并保持代码的可维护性。通过正确配置和与其他工具的集成,我们可以创建出高效、稳定的...
这样的插件在开发过程中非常实用,因为它允许开发者在构建流程中自动化处理文件,提高效率并确保文件状态的一致性。 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让开发者可以用JavaScript进行服务器端...
【gulp常用插件】 1. **清除文件夹**:`gulp-clean`用于清理指定目录。 2. **CSS处理**:`gulp-sass`编译Sass到CSS,`gulp-cssmin`压缩CSS,`gulp-autoprefixer`自动添加浏览器前缀。 3. **图片处理**:`gulp-...
`gulp` 有大量第三方插件,如 `gulp-eslint`(ESLint 集成)、`gulp-autoprefixer`(CSS 前缀自动补全)等,可以根据项目需求选择安装和使用。 9. **Gulp工作流示例** 一个完整的 `gulp` 工作流可能包括 SCSS ...
总的来说,`gulp-alias-combo-master`是一个实用的Gulp插件,对于JavaScript项目的构建流程有着显著的优化效果,特别是对于那些依赖复杂,需要高效管理模块的项目,它的价值尤为突出。通过合理配置和与其他Gulp插件...
Gulp 提供了两种常用的异常处理方式: 1. **gulp-notify**:用于在错误发生时向系统发送通知。 ```bash npm install --save-dev gulp-notify ``` 在 `gulpfile.js` 中使用: ```javascript const gulp = ...
`gulp-envify` 是一个专门为前端开发者设计的开源库,它是基于 `gulp` 的一个插件,主要用于在构建流程中处理环境变量。在前端开发中,尤其是在使用模块化工具如 `browserify` 时,我们经常需要在代码中使用环境变量...
《Gulp Succinctly》是一本专为学习Gulp和Node.js技术而编写的实用书籍。本书由Kris van der Mast撰写,Daniel Jebaraj作序,并由Syncfusion, Inc.出版。这本书详细介绍了Gulp的基本概念、流的处理方式以及如何使用...
此外,Gulp CLI 提供了一些常用命令,如 `gulp --version` 查看版本,`gulp help` 显示帮助信息,以及 `gulp [taskName]` 执行指定的任务。如果你想要自定义命令,可以通过在 Gulpfile.js 中定义 `exports` 对象来...
- **插件(Plugin)**:Gulp插件是用于扩展Gulp功能的NPM包,用于实现各种自动化任务。 - **Stream**:Gulp基于Node.js的流模型,可以将文件视为数据流进行处理,这使得文件处理过程更加高效。 #### 实战技巧 - **...
此外,Gulp插件生态系统丰富,社区活跃,提供了许多实用的插件来扩展Gulp的功能,满足各种开发需求。 本书第二版较之第一版,应该包含了Gulp的最新特性和最佳实践,帮助开发者快速适应Gulp的新版本和社区的最新发展...
【标题】"前端开源库-gulp-clipboard"指的是在前端开发中使用的一个开源工具,它是一个基于Gulp的插件,专门用于将文件内容轻松快捷地复制到操作系统的剪贴板。Gulp是一个自动化构建工具,它允许开发者通过定义任务...
在众多的 Gulp 插件中,“gulp-cache”是一个非常实用的工具,它能够实现任务执行的缓存功能,从而在连续构建过程中避免不必要的重复工作,提高构建速度。 “gulp-cache”插件的核心理念是将先前成功处理过的文件...
`gulp-download`是前端开发中非常实用的工具,它通过与Gulp的完美集成,让文件下载变得更加简单高效。结合其他Gulp插件,你可以构建出一套完整的前端构建流程,从资源下载、预处理到压缩合并,全面提升开发效率。...
虽然Webpack是当前最流行的前端构建工具,但Gulp同样是一个非常实用且易上手的选择。它以其简洁的语法和强大的功能,深受许多开发者喜爱。 **标签**: Gulp, 前端自动化工具, 前端 **压缩包文件名称列表**: 1. ...