gulp前端自动化构建工具使用

(1)新建项目目录gulp_web

(2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件

gulp前端自动化构建工具使用

gulp前端自动化构建工具使用

(3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任务,比如:

// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 检查脚本
gulp.task('lint', function() {
gulp.src('src/js/*.js') //该任务针对的文件
.pipe(jshint()) //该任务调用的模块
.pipe(jshint.reporter('default'));
}); // 编译Sass
gulp.task('less', function() {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./dist/css'));
}); // 合并,压缩文件
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
}); // 默认任务
gulp.task('fx_web', function(){
gulp.run('lint', 'less', 'scripts'); // 监听js文件变化
gulp.watch('src/js/*.js', function(){
gulp.run('lint', 'less', 'scripts');
});
// 监听less文件变化
gulp.watch('src/less/*.less', function(){
gulp.run('lint', 'less', 'scripts');
});
});

(4)在安装部署nodejs环境前提下,进入cmd命令行执行到项目根目录:f:\gulp_web>

(5)f:\gulp_web>npm init 一路enter键初始化打包信息,生成package.json文件,内容如:

  

{
"name": "gulp_web",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

(6)f:\gulp_web>npm install --save-dev gulp 执行安装gulp组件,结果会在项目根目录生成node_modules目录。

注意gulp的安装包括全局安装和项目目录安装:

在系统管理员cmd默认路径下全局安装请输入
npm install -g gulp
在项目目录安装请输入
npm install --save-dev gulp

gulp前端自动化构建工具使用

(7)根据上面gulpfile.js文件中所应用的声明组件:

// 引入组件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

按需安装组件,如下:
npm install --save-dev jshint gulp-jshint

npm install --save-dev less gulp-less

npm install --save-dev concat gulp-concat

npm install --save-dev uglify gulp-uglify

npm install --save-dev rename gulp-rename

(8)以上组件全部安装完成后,f:\gulp_web>gulp fx_web 执行打包任务,在gulpfile.jf文件中声明:

// 默认任务
gulp.task('fx_web', function(){
gulp.run('lint', 'less', 'scripts'); // 监听js文件变化
gulp.watch('src/js/*.js', function(){
gulp.run('lint', 'less', 'scripts');
});
// 监听less文件变化
gulp.watch('src/less/*.less', function(){
gulp.run('lint', 'less', 'scripts');
});
});

(9)如果上面任务执行顺利,会出现如下画面,并在根目录生成目录dist存放gulp处理过后的文件及目录。

gulp前端自动化构建工具使用

gulp前端自动化构建工具使用

gulp前端自动化构建工具使用

最后gulp自动化构建成功。

下面摘录其他网友的gulp组件说明:

必备插件

gulp-htmlmin 看到名字就能知道,这个插件是用来压缩 HTML。PS:注释啥的都可以去掉哦,看文档get更多技能哈
gulp-imagemin 除了能压缩常见的图片格式,还能压缩 SVG,叼叼的~
gulp-clean-css 压缩 CSS。我原本推荐的是 gulp-minify-css,结果其首页中已建议改用gulp-clean-css...
gulp-uglify 专业压缩 Javascript
gulp-concat 上面几个都是压缩,这插件是管合并的...恭喜,“减少网络请求”的成就达成:)
gulp-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
gulp-rename 修改文件名称。比如有时我们需要把app.js改成app.min.js,瞬间高级了
gulp-util 最基础的工具,但俺只用来打日志...

常用插件

run-sequence gulp 的 task 都是并行(异步)执行,如果遇见需要串行的场景,那么这个插件就是必备了。偶的使用场景是:处理(压缩、合并等等) CSS/JS、再gulp-rev、再上传 CDN;然后使用 CDN的地址替换 HTML 中的 CSS/JS 地址,再压缩 HTML。那么替换 HTML 这步须在之前的工作处理完后再执行。 ** 最后要说,gulp4.0发布后,不需要RS也可以搞定串行任务了 **
del / gulp-clean 删除。俺的使用场景是:JS/CSS 文件都会在压缩后使用gulp-rev,即文件名被hash,然后再上传到 CDN,最后俺再使用 删除插件 把本地压缩后的文件删除掉,不用多余保存。
gulp-rev 把静态文件名改成hash的形式。
gulp-rev-replace 配合 gulp-rev 使用,拿到生成的 manifest。json 后替换对应的文件名称。
gulp-rev-collector 到线上环境前,我会用来配合gulp-rev使用,替换 HTML 中的路径
gulp-rev-append 给页面引用的静态文件增加hash后缀,避免被浏览器缓存...当然,如果是使用 CDN,这个套路就不行了
gulp-connect / gulp-livereload LiveReload 的俩款插件都值得拥有,不过都各稍有学习成本,看看文档就明白鸟
gulp-sourcemaps 处理 JavaScript 时生成 SourceMap;如果你不了解 SourceMap,可以看看这篇阮一峰大神的《Source Map 详解》
gulp-load-plugins 帮忙偷懒用的,可以帮我们加载插件,不用require或者import...当然,俺个人感觉用了这个插件后,阅读gulpfile.js的可读性差了,鱼和熊掌不可兼得:(
gulp-jshint JavaScript 代码校验
gulp-sass / gulp-less 写 CSS 的同学都懂哈

进阶插件

babel JS 语法新特性用起来。这个插件可以让我们用新的 标准/特性/提案 写 JavaScript 代码,然后再向下 转换编译,最终生成随处可用的 JavaScript 代码。更通俗的说话就是:可以用新的规范写代码,经过 babel 编译后生成没有兼容问题的代码。
gulp-flatten 移动指定文件,不想压缩或者合并的时候,直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上,图方便:)
gulp-coffee CoffeeScript 值得去了解
gulp-markdown-pdf 把 Markdown 编译为 PDF
gulp-markdown 写手的福音,可以把 Markdown 转成 HTML
gulp-html2md 把 HTML 编译为 Markdown
gulp-tinypng 超屌的图片压缩工具,使用 Tinypng 引擎。PS:因为 Tinypng 免费帐号有月限制,所以使用使需注意。
sprity 生成雪碧图。稍有点学习成本,仔细阅读文档即可。
gulp-if 可以在 pipe 里面写点逻辑了,屌不屌。举例:比如处理 ./pub/*.js,如果文件名称是 xxx.js,那么不处理;更可以用来区分当前是开发环境还是生产环境。
gulp-file-include 俺搞内部项目的时候会用到,让 HTML 组件化的第一小步
gulp-git 直接在 Build 时把代码都提交到 git上了...特么劳资懒起来连我自己都害怕
gulp-qiniu 用于把指定文件上传至七牛的指定路径下(PS:首先,你得有自己的七牛账号和空间)
gulp-notify 在控制台中加入文字描述,build 的时候更高级有木有。当然,当需要的时候把错误信息也展示出来会很有帮助。更高级的功能就需要你查看其文档了~
gulp-plumber gulp 的错误处理有点坑,假如发生错误进程就挂了。相对的解决办法不少,但是这个是我个人比较推荐的,比特么在容易出错的地方写错误监听靠谱。所以这个插件可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。

上一篇:获取和设置iframe中的元素


下一篇:python列举django中间件的5个请求方法