gulp 使用笔记

1、安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

2、常用gulp插件：

　　① gulp-sass（gulp-less）：用于将sass(less)转换为css

　　②gulp-usemin：用于压缩页面中的js、css块文件

　　③gulp-cssmin、gulp-uglify：压缩css、js文件

　　④gulp-htmlmin：压缩html文件

　　⑤gulp-concat：拼接文件

　　⑥gulp-rename：重命名文件

　　⑦gulp-jshint：js语法检查

　　⑧gulp-connect: 启服务

　　⑨gulp-livereload:自动刷新页面

　　⑩gulp-notify：信息提示

　　gulp-autoprefixer:根据设置浏览器版本自动处理浏览器前缀

　　gulp-file-include: 文件引入 （https://www.npmjs.com/package/gulp-file-include/）

　　gulp-webserver

browsersync工具： http://www.browsersync.cn/docs/gulp/

　　...（待补充）

3、使用例子：

①  压缩html、sass并重命名

 'use strict';
    var gulp = require("gulp"),
        cssmin = require('gulp-cssmin'),
        concat = require('gulp-concat'),
        sass = require('gulp-sass'),
        autoprefixer = require('gulp-autoprefixer'),
        rename = require('gulp-rename'),
        uglify = require('gulp-uglify'),
        jshint = require('gulp-jshint'),
        usemin = require('gulp-usemin'),
        htmlmin = require('gulp-htmlmin');

    var sassFiles = 'public/sass/*.scss';


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

        return gulp.src(['views/*/*.html','views/*.html']) 
            .pipe(htmlmin({

　　　　　　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

　　　　　　})) 
            .pipe(usemin({
                outputRelativePath: '../',
                enableHtmlComment: true,
                js: [uglify, 'concat'],
                css: [cssmin, 'concat']
            }))
            .pipe(gulp.dest('dist/views')) 　　　　//页面输出地址
    });

　　//处理sass文件
    gulp.task('pageStyle', function() {  
        return gulp.src(sassFiles)
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(cssmin())
            .pipe(gulp.dest('public/css/'));
    });

　　//监控sass文件
    gulp.task('watch', function() {
        gulp.watch(sassFiles, ['pageStyle']);
    });

 

//（页面中使用在引用js、css文件时将引入的文件放入这个块中

//　　<!-- build:js(public/) /javascript/test.js -->

//           <script>tes1t.js</script>

//           <script>test2.js</script>
 //      <!-- endbuild -->

//）

 

②  压缩sass并重命名

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

var sassFiles = 'public/css/all.scss';
var jsFiles = 'public/js/*.js';
// Styles
gulp.task('styles', function () {
    return gulp.src(sassFiles)
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({
            message: 'Styles task complete'
        }));
});
// Scripts
gulp.task('scripts', function () {
    gulp.src('public/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(notify({
            message: 'Scripts task complete'
        }));
});
// Default task
gulp.task('default', function () {
    gulp.start('styles', 'scripts');
});
// Watch
gulp.task('watch', function () {
    gulp.watch(sassFiles, ['styles']);
    gulp.watch(jsFiles, ['scripts']);
});

 

③  合并压缩js并重命名

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');


gulp.task('scripts', function () {
    gulp.src(['public/js/sm.js', 'public/js/sm-extend.js', 'public/js/template.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('public/build/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('public/build/js'));
      gulp.src(['public/js/zepto.js', 'public/js/touch.js', 'public/js/config.js', 'public/js/fx.js'])
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public/build/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('public/build/js'))
});

gulp.task('css', function () {
    return gulp.src(['public/css/weui.css', 'public/css/animate.css', 'public/css/bootstrap.css', 'public/css/sm.css', 'public/css/sm-extend.css', 'public/css/iconfont.css', 'public/css/custom.css'])
        .pipe(concat('all.css'))
        .pipe(gulp.dest('public/build/css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('public/build/css'));
});

gulp.task('default', ['scripts', 'css']);

gulp.task('watch', function () {
    gulp.watch('public/js/*.js', ['scripts']);
    gulp.watch('public/css/custom.css', ['css']);
});

 

④  启用服务，实现自动刷新（实现scss编译）

注意：1、浏览器需要安装拓展LiveReload(自行百度安装)。

　　    2、在gulp监听任务中执行livereload();

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload'),
    connect = require('gulp-connect');

var sassFiles = 'public/css/all.scss';
var jsFiles = 'public/js/*.js';
// Styles
gulp.task('styles', function () {
    return gulp.src(sassFiles)
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({
            message: 'Styles task complete'
        })).pipe(livereload());
});
// Default task
gulp.task('default', ['connect', 'watch']);
// Watch
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(sassFiles, ['styles']);
    gulp.watch(jsFiles, ['scripts']);
});
gulp.task('connect', function() {
    connect.server({
      root: '',
      port: 8000,
      livereload: true
    });
  });

 

⑤ include 文件：

var gulp = require('gulp'),
fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() {
    gulp.src(['index.html'])
      .pipe(fileinclude({
        prefix: '@@',
        basepath: './'
      }))
      .pipe(gulp.dest('./'));
  });

<html>
    @@include('test.html')
</html>