gulp的使用

GULP最初设计的目的是拟合立场，现在已经逐步发展成为模拟凝聚态物质的通用代码，可以模拟无机固体、团聚体、缺陷、表面、界面以及聚合物等。

gulp只有5个方法 src run watch dest task

1、全局安装gulp

npm install --global gulp //全局安装gulp

2、在项目中安装gulp，项目安装gulp的目的是为了调用gulp的插件，比如调用gulp-less插件

npm install --save-dev gulp //在项目中安装gulp

3、在项目中安装gulp插件 全局中安装gulp是为了执行gulp的任务，项目中的gulp是为了调用插件

npm install gulp-less --save-dev //安装gulp-less的插件

ps：如果想在安装的时候把插件写进项目package.json文件的依赖中，则可以加上--save-dev。

4、配置gulpfile.js

gulpfile.js是gulp的配置文件，放置于项目根目录的js文件

代码：

// 引入Gulp安装好的插件 require('模块名称') var gulp = require('gulp'),     less = require('gulp-less');// 定义一个gulp_less任务，名称自定义即可gulp.task('gulp_less', function () {    // less文件地址    gulp.src('less/index.less')     // 调用gulp-less插件的功能    .pipe(less())     // 生成index.css（less预处理的css文件）    .pipe(gulp.dest('css')); });

6、运行gulp定义好的任务

执行gulp的任务命令：gulp任务名称

说明：在这里我们要运行gulpfile.js定义好的gulp_less任务，执行命令是gulp gulp_less。

7、压缩css的gulp插件是gulp-minify-css

在gulpfile的文件中添加下面的代码可以做到实时的监听less的变化，

添加之后要在终端 执行gulp testWatch

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

gulp.watch('css/*.less',['gulpLess'])

})

当编译less时出现语法错误或者其他异常，会终止watch事件，通常需要查看命令提示符窗口才能知道，这并不是我们所希望的，所以我们需要处理出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。

var gulp = require('gulp'),less = require('gulp-less');//当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumbernotify = require('gulp-notify'),plumber = require('gulp-plumber');gulp.task('testLess', function () {gulp.src('src/less/*.less').pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})).pipe(less()).pipe(gulp.dest('src/css'));});gulp.task('testWatch', function () {gulp.watch('src/**/*.less', ['testLess']);});

8、gulp压缩js代码，采用的插件是gulp-uglify

var gulp = require('gulp'),    uglify = require('gulp-uglify'); gulp.task('jsmin', function () {    gulp.src('src/js/index.js')        .pipe(uglify())        .pipe(gulp.dest('dist/js'));});

9、压缩html文件使用的插件是gulp-htmlmin

var gulp = require('gulp'),    htmlmin = require('gulp-htmlmin');

 

gulp.task('testHtmlmin', function () {    var options = {        removeComments: true,//清除HTML注释        collapseWhitespace: true,//压缩HTML        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"        minifyJS: true,//压缩页面JS        minifyCSS: true//压缩页面CSS    };    gulp.src('src/html/*.html')        .pipe(htmlmin(options))        .pipe(gulp.dest('dist/html'));});