web工作流

web工作流之Gulp学习

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目；

首先我们要搭配环境；

1、安装node.js，傻瓜式安装。

2、npm的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。

但这个npm服务器在国外，所以下载包的速度很慢，因此使用镜像cnpm

安装镜像cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、打开相应的文件夹创建一个package.json文件，它包括名称、版本、作者这些信息等

命令式创建：

cnpm init

4、全局安装 gulp

cnpm install -g gulp

5、作为项目的开发依赖（devDependencies）安装

cnpm install --save-dev gulp

将gulp安装到局部环境中，生成node_modules

6、在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

require（“模块”）是需要安装模块的

require（“模块”）有多少个安装多少个，不是命令会报错

7、安装插件:

如：
cnpm install --save-dev gulp-concat

cnpm install --save-dev 模块 模块 。。 。。

可单个，可多个一起安装

配置环境，因局部，不能再别的盘使用。

可以根据package.json,安装插件

命令：
gulp install

在当前文件夹打开cmd：shift+鼠标右击

点击（在此处打开命令窗口）

错误例子：

这个说明在此环境下没有安装gulp,重新安装即可

cnpm install --save-dev gulp

命令打错出现，还有乱搞也会。

所以这种错误暂时不懂，乱搞会出现的错误，目前只有重新配置这样解决做法了。

还有一种错误是没有安装插件；安装一遍即可。

只要会看错误行，就可以解决一些常见问题。

gulpfile.js的编写例子：

//加载模块

var gulp=require("gulp");
var concat=require("gulp-concat");
var rename=require("gulp-rename");
var uglify=require("gulp-uglify");
var cssmin=require("gulp-minify-css");
var htmlmin=require("gulp-htmlmin");
var brw=require("browser-sync");
/*压缩css*/
gulp.task("mincss",function(){
    gulp.src("css/*.css")
    .pipe(cssmin())
    .pipe(gulp.dest('src/css'));
});
/*合并压缩重命名js*/
gulp.task("concat",function(){
    gulp.src("js/*.js")
    .pipe(concat("all.js"))
    .pipe(gulp.dest("src"))
    .pipe(uglify())
    .pipe(rename({extname:'.min.js'}))
    .pipe(gulp.dest("src"));
});

/*压缩html*/
var options={
    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
}
gulp.task("htmlmin",function(){
    gulp.src("*.html")
    .pipe(htmlmin(options))
    .pipe(gulp.dest("html"));
});

/*浏览器同步*/
gulp.task("serve",function(){
    brw.init({
        files:["./*.html"],
        server:{baseDir:"./"}
    })
});

这个是编写方式，一般都是这样编写。很简单。这个使用，只要常常使用就很快熟练起来。

报错一般是细节上的问题。

 默认：

/*默认*/
gulp.task("default",["mincss","concat","htmlmin"]);

命令：
gulp

只要执行默认，就会一下子执行数组的里的任务，如：mincss，concat，htmlmin

 

编译sass、自动添加css前缀和压缩+监听

安装命令：

cnpm install --save-dev gulp-rename gulp-minify-css gulp-sass gulp-notify gulp-autoprefixer

gulpfile.js代码：

var gulp=require("gulp");

var rename=require("gulp-rename");
var cssmin=require("gulp-minify-css");
var sass = require('gulp-sass'),
    notify = require('gulp-notify'),
    autoprefixer = require('gulp-autoprefixer');

// Styles
gulp.task('styles', function() {
    //编译sass,编译指定目录下的sass
    return gulp.src('src/scss/*.scss')
    .pipe(sass())
     //添加前缀
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    //保存未压缩文件到我们指定的目录下面
    .pipe(gulp.dest('dest/css'))
    //给文件添加.min后缀
    .pipe(rename({ suffix:'.min' }))
     //压缩样式文件
    .pipe(cssmin())
    //输出压缩文件到指定目录
    .pipe(gulp.dest('dest/css'))
    //提醒任务完成
    .pipe(notify({ message: 'Styles task complete' }));
});  
  

/*监听*/
gulp.task("watch",function(){
/*src/scss/*.scss监听的路径，styles执行的任务*/
    gulp.watch('src/scss/*.scss',['styles']);
})

这样就可以实现到sass的编译的，只要在编译指定目录下的创建一个.scss后缀的sass文件，在这里编译的代码都可以输出到指定目录下，还有每次

输出之后都会有提示（Styles task complete）。