利用gulp处理js和less或者sass或者css

文件目录

/项目根目录
-gulpfile.js
-package.json
-/images
-/src
--/less
--/js
--*.html

//-node_modules//安装包依赖之后自动生成的

//--/web//编译后的文件放到这里

安装包依赖

在git bash中cd到项目目录，然后

npm install

会自动安装package.json里面写的插件，根据自己项目所需要的插件来安装,下面是我的项目的一些依赖

{
  "name": "ionic-project",
  "version": "1.0.0",
  "description": "An Ionic project",
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.1",//清除文件
    "gulp-concat": "^2.6.0",//合并文件
    "gulp-less": "^3.0.5",//编译less，如果是sass还需要一个node的库才能编译
    "gulp-minify-css": "^1.2.3",//压缩css
    "gulp-rename": "^1.2.2",//重新命名
    "gulp-template": "^3.1.0",//模板，这个可以替换一些关键字
    "gulp-uglify": "^1.5.3"//js压缩混淆
  }
}

编写项目的gulpfile.js

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    less = require('gulp-less'),
    gclean = require('gulp-clean'),
    template = require('gulp-template');
var data = {cssLink: 'css/main.css',jsLink: 'js/main.min.js'};//资源路径，一会会用template 来替换
gulp.task('clean', function() {
   return gulp.src('web', {read: false})
        .pipe(gclean());
});
gulp.task('minifycss', function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(minifycss())   //执行压缩
        .pipe(gulp.dest('web/css'));  //输出文件夹

});
gulp.task('minifyjs', function() {
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))    //合并所有js到main.js
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('web/js'));  //输出
});
gulp.task('watch', function() {//监听文件的变化
    gulp.watch('src/less/*.less', ['minifycss']);
    gulp.watch('src/js/*.js', ['minifyjs']);
    gulp.watch('src/*.html', ['temp']);
});


gulp.task('temp', function () {
    return gulp.src('src/*.html')
        .pipe(template(data))
        .pipe(gulp.dest('web'));
});
gulp.task('default', ['clean'], function(){
    gulp.start('minifycss', 'minifyjs','images',"temp","watch");
});

然后直接 gulp运行就会默认执行default这个任务，然后就会一直监听文件的改动.

图片压缩

可以使用gulp的插件来压缩，但是个人觉得还是用其他方法比较好，所以我把images放到了源码外
推荐两个压缩图片的网站tinypng 智图
压缩图片在上线之前做就可以了

其他

还可以在这个流程中加入es6的编译，需要两个库
还可以自动添加css前缀
等等

现在webpack很火，不过，对于简单的项目来说gulp更适合

公众号

我们的主页