您现在的位置是： Home> 学无止境> WEB前端> WEB前端

前端自动化工具gulp使用

张伟江2019-01-23 17:21【WEB前端】4485人已围观

gulp依赖npm，没有安装npm请安装nodejs

1、npm安装gulp包,可通过gulp -v查看版本号

cnpm install -g gulp
gulp -v

2、根目录新建一个package.json，将以下内容复制粘贴进去，然后执行cnpm install

{
  "name": "zhangweijiang-gulp",
  "version": "1.0.0",
  "description": "gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "zhangweijiang",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "browser-sync": "^2.14.0",
    "del": "^3.0.0",
    "gem": "^2.4.3",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-cdnizer": "^2.0.2",
    "gulp-cheerio": "^0.6.3",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-cleanhtml": "^1.0.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.7.0",
    "gulp-contrib-copy": "^0.1.2",
    "gulp-decomment": "^0.1.3",
    "gulp-dom-src": "^0.2.0",
    "gulp-file-include": "^2.0.1",
    "gulp-imagemin": "^3.0.2",
    "gulp-javascript-obfuscator": "^1.1.5",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-open": "^3.0.1",
    "gulp-plumber": "^1.1.0",
    "gulp-remove-logging": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^2.0.0",
    "gulp.spritesmith": "^6.9.0",
    "open": "^0.0.5"
  }
}

3、分配开发环境和正式环境

①根目录下新建一个config文件夹，进入config文件夹，新建一个config.js，复制以下内容进行粘贴

const SRC_DIR='./src/';   //源路径，不支持相对路径，下面也是
const DEV_DIR='./dev/';   //生成开发环境的文件
const DIST_DIR='./dist/';  //生成生产环境的文件


const config={
    src:SRC_DIR,
    dist:DIST_DIR,
    dev:DEV_DIR,
    html:{
        src:SRC_DIR+'*.html',
        dev:DEV_DIR,
        dist:DIST_DIR
    },
    assets:{
        src:SRC_DIR+'assets/**/*',
        dev:DEV_DIR+'assets',
        dist:DIST_DIR+'assets'
    },
    style:{
        src:SRC_DIR+'css/**/*.scss',  //如果是scss或者css，就改对应的
        dev:DEV_DIR+'css',
        dist:DIST_DIR+'css'
    },
    script:{
        src:SRC_DIR+'js/**/*.js',
        dev:DEV_DIR+'js',
        dist:DIST_DIR+'js'
    },
    img:{
        src:SRC_DIR+'images/**/*',
        dev:DEV_DIR+'images',
        dist:DIST_DIR+'images'
    }
};

module.exports=config;  //把这个接口暴露给别的文件用

②在config中新建gulpfile.dev.js文件，复制以下内容进行粘贴

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./config.js'); //引用配置的路径文件
const browserSync = require('browser-sync').create();
const reload      = browserSync.reload;

function dev(){
    gulp.task('html:dev',function(){
        return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dev));
    });
    gulp.task('assets:dev',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dev));
    });
    gulp.task('style:dev',function(){
        return gulp.src(config.style.src).pipe( $.sourcemaps.init() )
        .pipe($.sourcemaps.identityMap()).pipe($.sass()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe( $.sourcemaps.write('./')) // 将map文件编译到和dev同一目录下
        .pipe(gulp.dest(config.style.dev));
    });
    gulp.task('script:dev',function(){
        return gulp.src(config.script.src).pipe($.babel()).pipe($.babel()).pipe(gulp.dest(config.script.dev));
    });
    gulp.task('img:dev',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dev));
    });
     // 其他不编译的文件直接copy
    gulp.task('copy:dev', function () {
        gulp.src( config.src + '**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|tpl)')
        .pipe($.contribCopy())
        .pipe(gulp.dest(config.dev));
    });

   

    gulp.task('dev',['html:dev','style:dev','script:dev','img:dev','copy:dev'],function(){
            browserSync.init({
				proxy: "www.gulp.com", // 指定代理url
				notify: false, // 刷新不弹出提示
				//port:3056,
			});
            // 监听其他不编译的文件 有变化直接copy
            gulp.watch(config.src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']).on("change", reload);
            gulp.watch(config.html.src,['html:dev']).on("change", reload);
            gulp.watch(config.style.src,['style:dev']).on("change", reload);
            gulp.watch(config.script.src,['script:dev']).on("change", reload);
            gulp.watch(config.img.src,['img:dev']).on("change", reload);
    })
}
module.exports=dev;

③在config中新建gulpfile.prod.js文件，复制以下内容进行粘贴

//配置生产的文件

const gulp=require('gulp'); //引用gulp插件
const $=require('gulp-load-plugins')();  //自动加载插件，可以省略一个一个引用插件
const config=require('./config.js'); //引用配置的路径文件

function prod(){
    // 压缩全部html
    gulp.task('html',function(){
         return gulp.src(config.html.src).pipe($.fileInclude()).pipe($.cleanhtml()).pipe(gulp.dest(config.html.dist));
    });

    //复制assets下的全部文件
    gulp.task('assets',function(){
        return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dist))
    });

    // 编译全部css 并压缩
    gulp.task('css',function(){
        return gulp.src(config.style.src).pipe($.sass()).pipe($.autoprefixer({
                browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'],
                cascade: true
        })).pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.style.dist))
    });

    // 编译全部js 并压缩
    gulp.task('js',function(){
        return gulp.src(config.script.src)
        .pipe($.babel())
        .pipe($.removeLogging({
        // Options (optional)
        // eg:
         namespace: ['console', 'window.console']
        }))
        .pipe($.javascriptObfuscator({
            compact: true, //类型：Boolean 默认：true 是否完全压缩
            //domainLock: [".blog.com"],
            mangle: false, //类型：Boolean 默认：true 是否修改变量名
            rotateStringArray: true,
            //selfDefending: true, //类型: Boolean 默认：true
            stringArray: true,
            sourceMap:false
        }))
        .pipe(gulp.dest(config.script.dist))
    });
    gulp.task('image',function(){
        return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dist))
    });

    // 其他不编译的文件直接copy
    gulp.task('copy', function () {
        gulp.src( config.src + '**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|tpl)')
        .pipe($.contribCopy())
        .pipe(gulp.dest(config.dist));
    });

    gulp.task('build',['html','css','js','assets','image','copy'])
}
module.exports=prod;

④最后根目录新建一个gulpfile.js,复制粘贴以下内容，命令行都是通过这个文件启动

const gulp=require('gulp');
const prod=require('./config/gulpfile.prod.js');
const dev=require('./config/gulpfile.dev.js');
const config=require('./config/config.js');
const $=require('gulp-load-plugins')(); 
const spritesmith=require('gulp.spritesmith');
const del = require('del');

dev();  //启动开发环境，gulp dev
prod(); //启动生产环境,  gulp prod

//清除任务，防止缓存
gulp.task('clean',function(){
    gulp.src([config.dev,config.dist])
    .pipe($.clean());
});

//创建删除任务--开发环境使用
gulp.task('cleanMap', function() {
    del([config.dev+'**/*.map']).then(paths => (
        console.log('*.map would be deleted,and the path is => ' + paths)
    ))
});
//生成雪碧图--开发环境
gulp.task('sprite', function () {  //生成雪碧图，gulp sprite,分别生成dev和dist
  let spriteData = gulp.src(config.src+'/images/*.png')
  .pipe(spritesmith({
    imgName: 'images/sprite_2.png',
    cssName: 'css/sprite.css',
    padding: 20, // 图片之间的间距
    algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
    algorithmOpts: {sort: false} //是否排序
  }));
  return spriteData.pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});

//合并--生产环境使用
gulp.task('concat',function(){
        $.domSrc({file:"./dist/public.html",selector:'script',attribute:'src'})
        .pipe($.babel())
        .pipe($.concat('app.js'))
        .pipe($.uglify())
        .pipe($.stripDebug({
            debugger:true,console:true,alert:false
        }))
        .pipe($.removeLogging({
        // Options (optional)
        // eg:
         namespace: ['console', 'window.console']
        }))
        .pipe(gulp.dest(config.script.dist));

        $.domSrc({file:"./dist/public.html",selector:'link',attribute:'href'})
        .pipe($.concat('app.css'))
        .pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.style.dist));

         return gulp.src('./dist/public.html')
        .pipe($.cheerio({
            run: function ($,file) {
                $('script').remove(); 
                $('link').remove(); 
                $('body').append('<script src="./js/app.js"></script>'); 
                $('head').append('<link rel="stylesheet" href="./css/app.css">');
            },
            parserOptions: {
                decodeEntities: false //不转义
            }
        }))
        .pipe(gulp.dest(config.html.dist));
});

3、执行gulp

①gulp clean清除文件，防止缓存，gulp dev生成开发环境

gulp clean
gulp dev

②生成雪碧图

gulp sprite

③gulp build 生成生产环境

gulp build

4、插件介绍

①gulp-babel

功能：可用于es6转es5。

②browser-sync

功能：实现自动刷新

③del

功能：删除文件

④gulp

功能：必须要装，不装执行不了gulp命令，推荐安装3.9.1,最新4.0.0有些语法不一样

⑤gulp-autoprefixer

功能：提供css自动添加兼容浏览器的前缀，不需要手动添加

⑥gulp-cheerio

功能：非常好用的一个插件，可以通过此插件移除html中的script,link标签等一些处理。

return gulp.src('./dist/public.html')
        .pipe($.cheerio({
            run: function ($,file) {
                $('script').remove(); 
                $('link').remove(); 
                $('body').append('<script src="./js/app.js"></script>'); 
                $('head').append('<link rel="stylesheet" href="./css/app.css">');
            },
            parserOptions: {
                decodeEntities: false //不转义
            }
        }))

⑦gulp-clean-css

功能：压缩css,去除css注释

⑧gulp-cleanhtml

功能：压缩html

⑨gulp-concat

功能：可以合并css,js文件

⑩gulp-contrib-copy

功能：复制文件

⑪gulp-dom-src

功能：可用于合并html文件中的css,js

 $.domSrc({file:"./dist/public.html",selector:'link',attribute:'href'})
        .pipe($.concat('app.css'))
        .pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(config.style.dist));

⑫gulp-file-include

功能：引用共同的html模板

<title>@@title</title>//index.html@@include('./head.html',{    "title":"首页"})

⑬gulp-imagemin

功能：压缩图片

⑭gulp-javascript-obfuscator

功能：一个好用的js压缩插件，可压缩并混淆文件

.pipe($.javascriptObfuscator({
            compact: true, //类型：Boolean 默认：true 是否完全压缩
            //domainLock: [".blog.com"],
            mangle: false, //类型：Boolean 默认：true 是否修改变量名
            rotateStringArray: true,
            //selfDefending: true, //类型: Boolean 默认：true
            stringArray: true,
            sourceMap:false
        }))

⑮gulp-sass

功能：把sass转化为css

⑯gulp-less

功能：把less转化为css

⑰gulp-sourcemaps

功能：非常好用，调试less文件时候一般看不到代码在第几行，可以通过此插件实现实时查看。

⑱gulp-remove-loggin

功能：去除调试信息console

⑲gulp.spritesmith

功能：生产雪碧图

gulp.task('sprite', function () {  //生成雪碧图，gulp sprite,分别生成dev和dist
  let spriteData = gulp.src(config.src+'/images/*.png')
  .pipe(spritesmith({
    imgName: 'images/sprite_2.png',
    cssName: 'css/sprite.css',
    padding: 20, // 图片之间的间距
    algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
    algorithmOpts: {sort: false} //是否排序
  }));
  return spriteData.pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});

下面是完整的github实例：https://github.com/zhangweijiang/gulp

- END -

gulp

点赞(0) 打赏

Prev：less和sass/scss的区别

Next：Babel工具将es6转换成es5

Favourite