标签：9.png 文章 des -- 支持 pfile pts 文件夹 pre
关于学习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模块
//输出hello
gulp.task(‘hello‘,function () {
console.log(‘hello‘);
});
//压缩js
gulp.task(‘minify-js‘,function () {
gulp.src(‘js/*.js‘)
.pipe(uglify())
.pipe(gulp.dest(‘dest/js‘));
});
//合并js
gulp.task(‘concat-js‘,function () {
gulp.src(‘dest/js/*.js‘)
.pipe(concat(‘all.js‘))
.pipe(gulp.dest(‘dest/js‘));
});
//压缩html
gulp.task(‘minify-html‘,function () {
gulp.src(‘index.html‘)
.pipe(htmlmin())
.pipe(gulp.dest(‘dest/html‘));
});
//压缩css
gulp.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‘)); });
就说这么多了，其他的雷同。
标签：9.png 文章 des -- 支持 pfile pts 文件夹 pre
原文地址：http://www.cnblogs.com/hess/p/6133675.html
