gulp 安装与使用

2019独角兽企业重金招聘Python工程师标准>>>

1. 安装gulp

   npm install -g gulp

2. gulp的plugins

   gulp-clean       清空文件夹
   gulp-rename      重命名
   gulp-concat      合并文件
   gulp-uglify      压缩JS
   gulp-minify-css  压缩CSS
   gulp-less        less

3. 项目根目录下创建gulpfile.js

var gulp = require('gulp'),
    minify = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'); 

//解析less
gulp.task('bulid-less',function(){
    gulp.src('./less/lib/cs.less')
    .pipe(less())
    .pipe(gulp.dest('./lib/css'));
});
//合并、压缩、重命名css
gulp.task('stylesheets', ["build-less"], function(){
    gulp.src(["./css/*.css","!./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("./js/"))
  gulp.src("./bower_components/fonts/*")
      .pipe(gulp.dest("./fonts/"))
  gulp.src("./bower_components/bootstrap/fonts/*")
      .pipe(gulp.dest("./fonts/"))
  gulp.src("./bower_components/bootstrap/dist/css/bootstrap.min.css")
      .pipe(gulp.dest("./css/"))
});
//定义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");
});

转载于:https://my.oschina.net/yan5845hao/blog/411413