使用gulp构建前端项目

前言

在使用了一段时间grunt之后没事突然冒出个想法grunt和gulp到底哪个好？一番百度之后决定放弃使用grunt而使用gulp，为什么呢？发现现在grunt里面的插件什么的都不更新了，还**不能访问了。而gulp的插件库发现比grunt的丰富多了。

自己总结了几点（不好的欢迎补充 adengweb#[@]163.com）

1、书写相对来说比grunt要简洁

2、插件丰富

3、支持htmlMin的压缩

 

那我们来看看怎么用gulp来构建一个项目

 

当然是全局安装gulp

npm install gulp -g --registry=https://registry.npm.taobao.org

 

切换到项目

npm init 初始化项目并创建存放插件的package.json文件

 

项目里面安装gulp

npm install gulp -S // 也可以使用淘宝镜像去安装

 

安装插件

npm install gulp gulp-less gulp-cssmin gulp-imagemin --save-dev  // 可同时安装多个

--save:一个就是普通的项目依赖比如bootstrap，还用一种只是开发阶段需要用的，

--save-dev这种属于开发依赖比如gulp，开发依赖最终记录在devDependencies节点里面

 

项目里面常用gulp插件

var less = require('gulp-less');  // 编译less文件

var sass= require('gulp-sass);  // 编译sass文件

var htmlmin = require('gulp-htmlmin'); // 压缩html

var jsminer = require('gulp-jsminer'); // 压缩js

var imagemin = require('gulp-imagemin'); // 压缩图片

var cssmin = require('gulp-cssmin'); // 压缩css

 

 

完了在项目的根目录新建gulpfile.js配置文件

 

var URL_APP = {

       urlPath: 'src/',

       distPath: 'dist/'

}

 

// 1、引入插件

var gulp = require('gulp');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var jsminer = require('gulp-jsminer');

 

// 2、定义任务 less

gulp.task('less', function(){

  gulp.src(['src/less/**/*.less', '!src/less/**/_*.less']) //添加less文件路径，并处理为'_'下划线的less不做生成文件处理

    .pipe(less())  // 挂载插件

    .pipe(gulp.dest(URL_APP.distPath +'css'))  // 生成dist路径

});

gulp.task('minify', function(){

       gulp.src(['src/*.html','src/*.php'])

              .pipe(htmlmin({ collapseWhitespace: true }))

              .pipe(gulp.dest(URL_APP.distPath));

});

gulp.task('jsminer', function(){

       gulp.src('src/js/**/*.js')

              .pipe(jsminer({ toplevel: true }))

              .pipe(gulp.dest(URL_APP.distPath +'js'));

});

 

// 3、添加默认执行任务 gulp

gulp.task('default',['less', 'minify', 'jsminer', 'watch']);

 

// 4、监听文件变化

gulp.task('watch', function() {

    gulp.watch(['./src/less/**/*.less'],['less']);

    gulp.watch(['./src/**/*.html','./src/**/*.php'],['minify']);

    gulp.watch(['./src/js/**/*.js'],['jsminer']);

});