gulp 学习笔记

　　关于学习gulp，推荐大家看前端构建工具gulpjs的使用介绍及技巧，这篇文章就挺全面。

　　1、gulp的安装

　　gulp是基于nodejs开发的，所以首先确定安装了nodejs。

　　(1)全局安装gulp

npm install -g gulp

　　(2)针对项目局部安装gulp

npm install gulp

　　(3)在项目目录下安装gulp依赖包

npm install --save-dev gulp

或者在项目目录下安装package.json中配置的所有依赖

npm install

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "this is a gulpjs practice",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify-html":"^1.0.6",
    "gulp-minify-css":"^1.2.4"
  },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "heshuaishuai",
  "license": "ISC"
}

　　2.gulp的使用

　　(1)首先在项目的根目录下创建一个gulpfile.js文件

/** * Created by heshuaishuai on 2016/12/5. */var gulp = require(‘gulp‘),//加载gulp模块    uglify = require(‘gulp-uglify‘),//加载压缩js模块    concat = require(‘gulp-concat‘),//加载合并模块    htmlmin = require(‘gulp-minify-html‘),//加载压缩html模块    cssmin = require(‘gulp-minify-css‘);//加载压缩css模块//输出hellogulp.task(‘hello‘,function () {    console.log(‘hello‘);});//压缩jsgulp.task(‘minify-js‘,function () {    gulp.src(‘js/*.js‘)        .pipe(uglify())        .pipe(gulp.dest(‘dest/js‘));});//合并jsgulp.task(‘concat-js‘,function () {    gulp.src(‘dest/js/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(gulp.dest(‘dest/js‘));});//压缩htmlgulp.task(‘minify-html‘,function () {    gulp.src(‘index.html‘)        .pipe(htmlmin())        .pipe(gulp.dest(‘dest/html‘));});//压缩cssgulp.task(‘minify-css‘,function () {    gulp.src(‘css/*.css‘)        .pipe(cssmin())        .pipe(gulp.dest(‘dest/css‘));});gulp.task(‘default‘,[‘hello‘,‘minify-js‘,‘concat-js‘,‘minify-html‘,‘minify-css‘]);

　　require()函数用于加载依赖模块，

　　gulp.task(),创建任务函数，

　　gulp.task("default",[])为默认任务，当在命令行数据gulp命令时，default后面数组中的任务将被自动执行。

　　(2)运行gulp

gulp

　　3、gulp的API

　　gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;

　　 (1)gulp.task

　　　　创建任务函数　　　

gulp.task(‘hello‘,function () {
    console.log(‘hello‘);
});

　　 (2)gulp.src

　　　　用于找到要处理的文件。支持“*”语法，如："main/*" , "js/*.js" ，"**"代表所有文件夹。

　　　　pipe()返回处理结构以便后面操作的衔接。　　　　

gulp.src(‘js/*.js‘)　　.pipe(uglify());

　　 (3)gulp.dest

　　　　被处理文件的输出路径。　　　　

gulp.pipe(gulp.dest(‘dest/js‘));

　　 (4)gulp.watch

　　　　对前面参数地址中的文件进行监听，当有文件内容发生变化时，执行后面参数数组中的任务。　　　　

gulp.watch(‘less/*.less‘,[‘testless‘]);

　　4、gulp插件

　　  (1)压缩js

npm install --save-dev gulp-uglify

gulp.task(‘minify-js‘,function () {
    gulp.src(‘js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dest/js‘));
});

　　 (2)合并js

npm install --save-dev gulp-concat

gulp.task(‘concat-js‘,function () {
    gulp.src(‘dest/js/*.js‘)
        .pipe(concat(‘all.js‘))
        .pipe(gulp.dest(‘dest/js‘));
});

　　 (3)压缩css

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

gulp.task(‘minify-css‘,function () {
    gulp.src(‘css/*.css‘)
        .pipe(cssmin())
        .pipe(gulp.dest(‘dest/css‘));
});

　　就说这么多了，其他的雷同。