gulp学习笔记

需要用到的基本插件有

# 基本的
npm install gulp --save-dev
# sass转为css
npm install gulp-sass --save-dev
# 本地服务器
npm install browser-sync --save-dev
# 多个引用文件合成一个
npm install gulp-useref --save-ref
# 判断
npm install gulp-if --save-dev
# js压缩
npm install gulp-uglify --save-dev
# css压缩
npm install gulp-minify-css --save-dev
# html压缩
npm install gulp-htmlmin --save-dev
# 图片压缩
npm install imagemin --save-dev
# 缓存，无修改的图片不压缩，节约时间
npm install gulp-cache --save
# 删除多余文件
npm install del --save-dev
# 任务队列执行
npm install run-sequence --save-dev

步骤

1. 先安装

 npm install gulp-sass --save-dev

2. 再引用

var sass = require('gulp-sass')

3. 然后调用

 sass()

基本语法如下

gulp.task('useref', function () {
    var htmlOption = {
        collapseWhitespace: true,
        minifyCSS: true,
        removeComments: true
    }
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.html', htmlmin(htmlOption)))
        .pipe(gulp.dest('dist'));
})

• task（新建）
• src （读取资源）
• pipe （管道即要执行的操作）
• dest （输出）

最后在cmd执行

 gulp useref

基本参数

useref使用

useref()之后，a.js、b.js、main.js合并成js目录下的main.min.js

uglyfi与minifycss自动的去掉注释压缩代码，但是htmlmin需要做参数配置
html的参数配置

gulp.task('htmlmin', function () {
    var options = {
        removeComments: true, /*清除HTML注释*/
        collapseWhitespace: true, /*压缩HTML*/
        collapseBooleanAttributes: true, /*省略布尔属性的值 =>*/
        removeEmptyAttributes: true, /*删除所有空格作属性值  ==> */
        removeScriptTypeAttributes: true, /*删除