gulp使用 笔记

全局安装gulp，也需要本地安装gulp插件。全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

 

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

 

主要还是配合插件的使用

贴个链接http://www.cnblogs.com/2050/p/4198792.html

 https://www.cnblogs.com/Tom-yi/p/8036730.html

自己项目中用的代码，记一下

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "frank",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.6",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-file-include": "^1.1.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-less": "^3.3.2",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-uglify": "^3.0.0"
  }
}

gulpfile.js

/**
 * Created by frank on 2017/7/21.
 */
//导入工具包 require('node_modules里对应模块')
// npm install --save-dev gulp gulp-load-plugins gulp-less gulp-livereload gulp-connect gulp-uglify gulp-concat gulp-imagemin gulp-file-include gulp-cache
var gulp = require('gulp'), //本地安装gulp所用到的地方
    $ = require('gulp-load-plugins')(); //加载package.json中devDependencies里的插件
console.log($)
var gutil   = require('gulp-util');

var htmlSrc = 'src/*.html';
var htmlDist = 'dist';

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/*.less') //该任务针对的文件
        .pipe($.less()) //该任务调用的模块
        .pipe(gulp.dest(htmlDist+'/static/css')); //将会在src/css下生成index.css
});
gulp.task('css', ['testLess', 'fonts'], function(){
    gulp.src(['src/css/base.css','src/css/bootstrap.css','src/css/swiper-3.4.2.min.css'])
        .pipe(gulp.dest(htmlDist+'/static/css'));    
});
gulp.task('fonts', function(){
    gulp.src('src/fonts/*.*')
        .pipe(gulp.dest(htmlDist+'/static/fonts'));  
})

//定义livereload任务
gulp.task('connect', function () {
    $.connect.server({
        root: htmlDist,
        livereload: true
    });
});

//定义html任务
gulp.task('html',['js','images'], function () {
    gulp.src(htmlSrc)
        .pipe($.fileInclude({
          prefix: '@@',
          basepath: '@file'
        }))
        .pipe(gulp.dest(htmlDist))
        .pipe($.connect.reload());
});

//定义js任务
gulp.task('js', function () {
    gulp.src('src/js/*.js')
        // .pipe($.uglify())
        // .pipe($.concat('jkd.min.js'))
        .pipe(gulp.dest(htmlDist+'/static/js'));
});

// Images
gulp.task('images', function() {
    gulp.src('src/images/**/*')
    .pipe($.cache($.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest(htmlDist+'/static/images'));
});

//定义看守任务
gulp.task('watch', function () {
    $.livereload.listen();//这里需要注意！旧版使用var server = livereload();已经失效
    // app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
    gulp.watch([htmlDist+'/*.*', htmlDist+'/static/css/*.*'], function(event) {
        $.livereload.changed(event.path);
    });
    gulp.watch('src/**/*.html', ['html']);
    gulp.watch('src/less/*.less', ['testLess']);
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch('src/images/**/*', ['images']);
 });

gulp.task('default',['html','watch','connect','css']);