gulp学习笔记

1】npm install gulp -g 全局安装gulp，查看安装是否成功gulp -v（首先安装node，查看node是否安装成功 node -v）

2】npm init 创建package.json文件

3】npm install gulp --save-dev 本地安装gulp

4】在工程目录下手动创建gulpfile.js文件。

5】安装插件依赖（用到哪个安装哪个）

npm install gulp-concat --save-dev 文件打包

npm install gulp-rename --save-dev 文件重命名

npm install gulp-imagemin --save-dev  图片压缩

npm install gulp-jslint --save-dev  js代码校验 慎用

npm install gulp-minify-css --save-dev  css压缩

npm install gulp-minify-html --save-dev  html压缩

npm install gulp-uglify --save-dev  js压缩

npm install gulp-connect --save-dev   设置链接服务

npm install gulp-clean --save-dev //每次打包项目文件后会新成新的文件，旧文件就应该删除。

6】然后你可以在gulpfile.js里最先引入gulp模块后 gulp。

var gulp = require("gulp");

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

    console.log('gulp启动成功');//测试gulp是否启动

})

7】js、html压缩合并（代码例子）

var gulp = require('gulp');

var uglify = require('gulp-uglify');

var minifyHtml = require('gulp-minify-html');

var concat = require('gulp-concat');

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

    gulp.src('app/viewModules/**/*.js') //源文件所在路径

    .pipe(concat('all.js')) 

    .pipe(gulp.dest('dist/js'))

    .pipe(uglify())

    .pipe(gulp.dest('dist/js'))  //输出文件路径

});

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

    gulp.src('app/viewModules/**/*.html')

.pipe(concat('all.html'))

    .pipe(gulp.dest('dist/templates'))

    .pipe(minifyHtml())

    .pipe(gulp.dest('dist/templates'))

}

gulp.task('default',['uglifyJs','htmlMinify'])

gulp中文网https://www.gulpjs.com.cn