整理gulp自动化构建工具(包含PostCss)

教程地址:http://segmentfault.com/a/1190000000372547     http://www.w2bc.com/Article/12941

1、安装nodejs

2、新建package.json文件

3、全局和本地安装gulp

4、使用npm安装gulp插件(如:gulp-jshint、gulp-sass、gulp-mini-css、gulp-uglify等)

5、新建gulpfile.js文件

6、通过命令提示符运行gulp任务

PostCss插件概览:https://github.com/postcss/postcss#plugins

 

说明:

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件。它是一个普通json文件,所以不能添加任何注释。安装gulp插件的时候如果提示npm warn package.json这样的问题,请在package.json文件里添加"private": true,即将应用程序标记为私有。

gulpfile.js文件参考:

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var Autoprefixer = require('gulp-autoprefixer');//自动添加浏览器前缀
var htmlmin = require('gulp-htmlmin');//压缩html,可以压缩页面js、css
var imagemin = require('gulp-imagemin');//压缩图片文件(包括PNG、JPEG、GIF和SVG图片)
var minifycss = require('gulp-minify-css');//压缩css文件,并给引用url添加版本号避免缓存
var revappend = require('gulp-rev-append');//给页面的引用添加版本号,清除页面引用缓存
var spritesmith = require('gulp.spritesmith');//生成sprites图片和样式表
var less = require('gulp-less');//编译Less
var csslint = require('gulp-csslint');//检查css有无报错或警告
var jshint = require('gulp-jshint');//检查js有无报错或警告
var concat = require('gulp-concat');//合并js文件
var uglify = require('gulp-uglify');//压缩js文件
var babel = require('gulp-babel');//转换代码为ES6最新语法形式

//引入PostCss
var postcss = require('gulp-postcss');
var bem = require('postcss-bem');
var cssNext = require('postcss-cssnext');
var px2rem = require('postcss-px2rem');//px转换成rem
var autoprefixer = require('autoprefixer-core');
var postcssSimpleVars = require("postcss-simple-vars");
var postcssMixins = require("postcss-mixins");
var postcssNested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");


//nodeJS中管道式方法的api一般为.pipe()方法,管道化执行组件任务,它很类似jQuery中的链式写法

//定义一个Less任务(自定义任务名称)
// 编译Less
gulp.task('less', function() {
    gulp.src('./less/*.less') //该任务针对的文件,*代表所有文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('./css')); //将会在css目录下生成.css文件
});

//postcss处理css.
gulp.task("postcss", function(){
    var processors = [
        postcssMixins,
        postcssSimpleVars,
        postcssNested,
        cssNext,
        bem({style: 'bem'}),
        px2rem({
            remUnit: 75
        }),
        autoprefixer({
            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
        })];

    return gulp.src(['./css/*.css'])
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("./stylesheets"));
});

//生成sprites图片和样式表
gulp.task('sprite', function () {
    var spriteData = gulp.src('./images/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));
    return spriteData.pipe(gulp.dest('./sprite'));
});

//根据设置浏览器版本自动处理浏览器前缀
gulp.task('testAutoFx', function () {
    gulp.src('./css/*.css')
        .pipe(Autoprefixer({
            browsers: ['last 2 versions'], //主流浏览器的最新两个版本
            cascade: true, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认:true
        }))
        .pipe(gulp.dest('./dist/css'));
});

//将px转换成rem
gulp.task('px2rem', function() {
    var processors = [
        px2rem({
            remUnit: 75
        })
    ];
    return gulp.src('./css/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

//转换代码为ES6最新语法形式
gulp.task('babel', function() {
    return gulp.src('./js/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist/es6'));
});

//压缩HTML
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值  ==> 
        removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,//删除
                    
                    

你可能感兴趣的:(json,移动开发,javascript)