码迷,mamicode.com
首页 > 其他好文 > 详细

gulp简单使用

时间:2017-09-29 09:57:36      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:depend   code   test   des   web   string   运行   comm   type   

公司项目需要优化,前端方面只要就是资源整合。拿另一个小项目试验:

gulpfile.js

/**
 * Created by AAA on 2017/9/28.
 */
var gulp = require(‘gulp‘);
var del = require(‘del‘);
var autoprefixer = require(‘gulp-autoprefixer‘);
var uglify = require(‘gulp-uglify‘);
var cssmin = require(‘gulp-minify-css‘);
var fileinclude = require(‘gulp-file-include‘);
var htmlmin = require(‘gulp-htmlmin‘);
// 清除 dist 文件夹
gulp.task(‘clean‘, function () {
    return del.sync(‘./dist‘);
});
// html 整合
gulp.task(‘dealHtml‘, function () {
    gulp.src([‘src/view/**.html‘])
        .pipe(fileinclude({
            prefix: ‘@@‘,
            basepath: ‘@file‘
        }))
        .pipe(htmlmin({
            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
        }))
        .pipe(gulp.dest(‘dist‘));
});
//静态资源
gulp.task(‘dealJs‘, function () {
    gulp.src(‘src/view/assets/js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dist/assets/js‘));
});
gulp.task(‘dealCss‘, function () {
    gulp.src(‘src/view/assets/style/*.css‘)
        .pipe(autoprefixer({
            browsers: [‘last 2 versions‘, ‘Android >= 4.0‘],
            cascade: true, //是否美化属性值 默认:true
            remove: true //是否去掉不必要的前缀 默认:true
        }))
        .pipe(cssmin({
            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
            compatibility: ‘ie8‘,//保留ie7及以下兼容写法 类型:String 默认:‘‘or‘*‘ [启用兼容模式; ‘ie7‘:IE7兼容模式,‘ie8‘:IE8兼容模式,‘*‘:IE9+兼容模式]
            keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
            keepSpecialComments: ‘*‘//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest(‘dist/assets/style‘));
});
gulp.task(‘dealImgs‘, function () {
    gulp.src(‘src/view/assets/pic/*.*‘)
        .pipe(gulp.dest(‘dist/assets/pic‘));
});
gulp.task(‘data‘, function () {
    gulp.src(‘src/view/assets/data/*.json‘).pipe(gulp.dest(‘dist/assets/data‘));
});
gulp.task("build", ["dealCss", "dealJs", "dealImgs", "data"]);
// 监控html
gulp.task(‘watch‘, function () {
    gulp.watch(‘src/view/*.*‘, [‘dealHtml‘]);
    gulp.watch(‘src/view/assets/*/*.*‘, ["build"]);
});

package.js

{
  "name": "huangzi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-file-include": "^1.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.2.0",
    "gulp-htmlmin": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

项目目录

技术分享

控制台运行:

gulp watch //开发

gulp build //打包

 

讲真,有了webpack在前,gulp简直就是小天使技术分享

 

gulp简单使用

标签:depend   code   test   des   web   string   运行   comm   type   

原文地址:http://www.cnblogs.com/-ge-zi/p/7609393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!