gulp详细入门教程

gulp详细入门教程

gulp作用：

1. Sass编译
2. Css Js 图片压缩
3. Css Js 合并
4. Css Js 内联
5. Html的include功能
6. Autoprefixer
7. 自动刷新
8. 去缓存
9. Handlebars模板文件的预编译
10. 雪碧图
11. ESLint rem移动端适配方案
    

---

一、安装nodejs

1.下载链接：https://nodejs.org/en/download/
2.安装
3. node -v 查看node的版本号
4. npm -v 查看npm的版本号

---

二、全局安装gulp

安装：npm install gulp -g

点击查看大图

gulp -v 查看gulp的版本号

---

选装cnpm( 在国内 你懂的 ( ﹁ ﹁ ) ~→ )

说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

安装：命令提示符执行 npm install cnpm -g – registry=https://registry.npm.taobao.org

点击查看大图

cnpm -v 查看gulp的版本号(安装成功)

---

三、生成package.json文件

进入项目目录
在项目目录下生成文件：命令提示符执行 npm init / cnpm init

在指定目录下会生成一个package.json的文件（cmd中输入：package.json）、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

注：如果想全部使用默认配置可使用 “npm init -y/ cnpm init -y” 不询问直接创建 package.json 文件

---

四、在项目下安装gulp：

我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

安装：npm install gulp --save-dev

点击查看大图

---

五、在项目根目录下新建 gulpfile.js文件（重要、核心配置 ）

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

它大概是这样一个js文件：

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    concat = require('gulp-concat'),//合并文件 --合并只是放一起--压缩才会真正合并相同样式
    less = require('gulp-less'),//编译less文件
    cssmin = require('gulp-minify-css'),//压缩css文件
    rename = require('gulp-rename'),//设置压缩后的文件名
    autoprefixer = require('gulp-autoprefixer'),//给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况
    imagemin = require('gulp-imagemin'),  //图片压缩
    spriter=require('gulp-css-spriter');//合并图片

//编译less文件   定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

//压缩css文件
gulp.task('minifycss', function() {
    gulp.src('src/css/index.css')      //压缩的文件
        .pipe(cssmin())   //执行压缩
        .pipe(gulp.dest('src/cssmin'))   //输出文件夹
});

gulp.task('default',['testLess','minifycss'],function(){//定义默认任务  先执行testLess和minifycss 再执行console.log('hello world');
    console.log('hello world');
}); 

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

---

六、安装需要的模块

需要什么功能就安装什么模块，命令详见下图

点击查看大图

---

七、运行

当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,‘minifycss’]。

成功将src/less下的index.less编译成src/css下的index.css和压缩成src/cssmin下的index.css

点击查看大图

---

最后附上3.9.1版本最全的配置(仅供参考，勿喷 ^_ )

先生成：gulp build
再监听：gulp dev

具体配置的小细节在github上：https://github.com/Trojain/gulp-demo

var gulp = require("gulp"),                         // gulp主组件
    babel = require('gulp-babel'),                  // 编译es6
    sass = require('gulp-sass'),                    // 编译sass
    cssmin = require('gulp-clean-css'),             // 压缩css文件
	uglify = require("gulp-uglify"),		        // 压缩丑化js文件
	imagemin = require('gulp-tinypng-nokey'),       // 压缩图片
	htmlmin = require('gulp-htmlmin'),              // 压缩html文件
    zip = require('gulp-zip'),                      // 打包成压缩文件
    rev = require('gulp-rev'),                      // 对文件名加MD5后缀
    revCollector = require('gulp-rev-collector'),   // 替换被gulp-rev改名的文件名
    copy = require('gulp-copy'),                    // 拷贝文件
    watch = require('gulp-watch'),                  // 监听文件
    browserSync = require('browser-sync').create(), // 自动刷新文件
	runSequence = require('run-sequence');          // 按顺序执行



//先编译es6,再压缩js
gulp.task('compress_js',function(){
    return gulp.src(['./begin_file/js/*.js','!./begin_file/js/*.min.js'])   // 获取.js文件，同时过滤掉.min.js文件
        .pipe(babel())          // 编译es6
        // .pipe(uglify({preserveComments:'some'}))    // 使用uglify进行压缩，并保留部分注释
        .pipe(uglify())         // 压缩js
        .pipe(browserSync.reload({stream:true}))       // 实时刷新
        .pipe(rev())            // 给文件添加hash编码    
        .pipe(gulp.dest('./after_file/js'))
        .pipe(rev.manifest())   // 生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('./after_file/js'))
});


// JS生成文件hash编码并生成 rev-manifest.json文件名对照映射  
gulp.task('revHtmlJs', function () {
    return gulp.src(['./after_file/js/*.json', './after_file/index.html'])
        .pipe(revCollector())  // 替换html中对应的记录  
        .pipe(gulp.dest('after_file/'))
});


// 先编译sass,再压缩css
gulp.task('compress_sass', function(){
    return gulp.src(['./begin_file/css/*.css','./begin_file/css/*.scss','!./begin_file/css/*.min.css'])
        .pipe(sass())          // 编译sass
        .pipe(cssmin())        // 压缩css
        .pipe(browserSync.reload({stream:true}))       // 实时刷新
        .pipe(rev())           // 给文件添加hash编码   
        .pipe(gulp.dest('./after_file/css'))
        .pipe(rev.manifest())  // 生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('./after_file/css'))
});


// CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revHtmlCss', function () {
    return gulp.src(['./after_file/css/*.json', './after_file/index.html'])  
        .pipe(revCollector())  // 替换html中对应的记录 
        .pipe(gulp.dest('./after_file/'))
}); 


// 图片压缩
gulp.task('compress_img', function () {      
    gulp.src('./begin_file/img/*.{png,jpg,jpeg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('./after_file/img/'))
        .pipe(browserSync.reload({stream:true}));      // 实时刷新
});


// 压缩html文件
gulp.task('compress_html', function() {
    return gulp.src('./begin_file/*.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('./after_file/'))
        .pipe(browserSync.reload({stream:true}));      // 实时刷新
});


// *.min.*压缩文件直接复制
gulp.task('copy',function () {
    gulp.src('./begin_file/js/*.min.js')
        .pipe(gulp.dest('./after_file/js/'))
    gulp.src('begin_file/css/*.min.css')
        .pipe(gulp.dest('./after_file/css/'))   
});


// 压缩整个gulp后的文件(丢给后台上线用)
gulp.task('compress_zip',function () {
    gulp.src('./after_file/**')
        .pipe(zip('backup.zip'))
        .pipe(gulp.dest('./after_file/'))
});



// 开发用(监听、刷新)
gulp.task('dev', function() {

    browserSync.init({                 // 启动Browsersync服务,实时刷新
        server: {
            baseDir: './after_file',   // 启动服务的目录 默认 index.html    
            index: 'index.html'        // 自定义启动文件名
        },
        port:8051,                     // 指定访问服务器的端口号
        open: 'external',              // 决定Browsersync启动时自动打开的网址 external 表示 可外部打开 url, 可以在同一 wifi 下不同终端测试
        injectChanges: true            // 注入CSS改变
    });

    // 监听文件变化，执行相应任务
    gulp.watch('./begin_file/**/*.js', ['compress_js']);
    gulp.watch('./begin_file/**/*.html', ['compress_html']);
    gulp.watch('./begin_file/**/*.css', ['compress_sass']);
    gulp.watch('./begin_file/**/*.scss', ['compress_sass']);
    gulp.watch('./begin_file/**/*.{png,jpg,gif,ico}', ['compress_img']);

})



// 测试或上线用(压缩、打包)
gulp.task('build', function (done) {

    condition = false;
    runSequence(
        'compress_js',
        'compress_sass',
        'compress_img',
        'compress_html',
        'copy',
        'revHtmlJs',
        'revHtmlCss',
        'compress_zip',
    done);
    
});

---

关于给静态资源文件添加hash(md5)后缀问题

执行gulp build后，js和css出现如下情况

此时需要改下node_modules文件夹中的几个配置文件

1.打开node_modules\gulp-rev\index.js 
		第135行:manifest[originalFile] = revisionedFile;
		修改为: manifest[originalFile] = originalFile + '?v=' +file.revHash;

2.打开node_modules\rev-path\index.js 
		第9行:return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
		修改为: return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

3.打开node_modules\gulp-rev-collector\index.js 
		第40行:var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
		修改为: var cleanReplacement = path.basename(json[key]).split('?')[0];

修改完成保存后再执行gulp build即可

---

想关传送门：

1. gulp 给静态资源文件添加hash(md5)后缀 防止缓存
2. gulp-connect实现页面实时自动刷新
3. gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey图片压缩优化详解及对比