一.准备:
- Npm 是去国外的一个服务器下载js包, 那么有的时候会卡, 可以使用国内的镜像代替,
- 测试使用cnpm -v 有弹出版本号, 则安装完成
- 新建一个项目目录, 路径之中不能带有中文, 并且项目目录名称不能是gulp !!!!
- 到新建的项目目录中打开命令行工具! 然后使用 npm init 或者 cnpm init
- 认识几个名词 --global(-g) 全局安装 --save-dev 开发依赖 --save 生产环境依赖
- 安装中文网站的入门指南进行操作, 安装好gulp之后, 输入gulp -v 测试是否安装完毕!
- --save-dev : 是将第三方插件添加到工程项目开发依赖列表,以下插件主要用于html/css/js文件压缩合并混淆以及浏览器同步操作:
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-less": "^3.3.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^3.0.0",
"node-sass": "^4.5.3"
}
二.在gulp安装完毕之后,使用gulp:
- 在工程项目根目录下, 新建一个gulpfile.js文件
- 再建立两个文件夹, 分别命名为 src 和 dist
- 再到src目录下 建立 index.html 文件
- 创建完成:
- 将src/index.html 复制到dist/
- 在src文件夹下 创建一个js文件夹, 再创建 /src/js/a.js 和 /src/js/b.js , 合并多个js并且混淆(压缩和加密) 使用 gulp-concat gulp-uglify
- 任务三: 压缩css 使用gulp-cssnano
- 转码less 使用gulp-less
- 转码sass 使用gulp-sass 错误处理 : 在下载gulp-sass的时候, 发现 node-sass存在github的某一个仓库, 那个地址 被墙, 需要单独先下载node-sass 具体命令如下npm i node-sass -g npm i node-sass --save-dev, 再去下载gulp-sass就可以了!
- 压缩html 使用gulp-htmlmin 去掉注释, 去掉属性值的引号, 去掉type=”text/javascript”
- 自动完成以上任务 使用gulp.watch
- 浏览器同步 使用 browser-sync 修改同步选项 登录 localhost:3001
三.下面附gulpfile.js配置代码,注意修改文件路径:
var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var Cssnano = require('gulp-cssnano'); var less = require('gulp-less'); var sass = require('gulp-sass'); var htmlmin = require('gulp-htmlmin'); var browserSync = require('browser-sync').create(); gulp.task('concat-uglify-js', function() { gulp.src('./src/js/*.js') .pipe(concat('js.js')) .pipe(uglify()) .pipe(gulp.dest('./dist/js/')); }); gulp.task('cssnano', function() { gulp.src('./src/styles/*.css') .pipe(Cssnano()) .pipe(gulp.dest('./dist/styles/')); }); gulp.task('less', function() { gulp.src('./src/styles/*.less') .pipe(less()) .pipe(Cssnano()) .pipe(gulp.dest('./dist/styles/')); }); gulp.task('sass',function(){ gulp.src('./src/styles/*.sass') .pipe(sass()) .pipe(Cssnano()) .pipe(gulp.dest('./dist/styles/')); }); gulp.task('sass',function(){ gulp.src('./src/styles/*.scss') .pipe(sass()) .pipe(Cssnano()) .pipe(gulp.dest('./dist/styles/')); }); gulp.task('minify', function() { gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, // 折叠对文档树中的文本节点有贡献的空白空间,不可缺 removeAttributeQuotes: true, //尽可能删除属性的引号 removeScriptTypeAttributes: true, //从script标签中移除 其他type属性值保持不变 minifyJS: true, //缩小脚本元素和事件属性中的JavaScript(使用UglifyJS) removeComments :true //剥离HTML注释 })) .pipe(gulp.dest('./dist/')) .pipe(browserSync.reload({ stream:true })); }); gulp.task('copy', function() { // 将你的默认的任务代码放在这 gulp.src("./src/*.html") .pipe(gulp.dest("./dist")); }); gulp.task('autogulp',function(){ gulp.watch('./src/js/*.js',['concat-uglify-js']); gulp.watch('./src/styles/*.sass',['sass']); gulp.watch('./src/*html',['minify']); }); gulp.task('browser-sync',function(){ browserSync.init({ server:{ baseDir:"./dist" } }); gulp.watch('./src/js/*.js',['concat-uglify-js']); gulp.watch('./src/styles/*.sass',['sass']); gulp.watch('./src/*html',['minify']); });