menu
more_vert

gulp运行及gulpfile.js配置

作者:dayu

removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS }; gulp.src(‘*.html‘) //该任务针对的源文件 .pipe(htmlmin(options)) //该任务调用的模块 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testImagemin任务 gulp.task(‘testImagemin‘, function() { //testImagemin参数 var options = { optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true, //类型:Boolean 默认:false 多次优化svg直到完全优化 use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 }; gulp.src(‘*.{png,jpg,gif,ico}‘) //该任务针对的源文件 .pipe(imagemin(options)) //该任务调用的模块 .pipe(cache(imagemin(options))) //只压缩修改的图片 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testLess任务 gulp.task(‘testLess‘, function() { //cssmin参数 var options = { advanced: false, //类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: ‘ie7‘, //保留ie7及以下兼容写法 类型:String 默认:‘‘or‘*‘ [启用兼容模式; ‘ie7‘:IE7兼容模式,‘ie8‘:IE8兼容模式,‘*‘:IE9+兼容模式] keepBreaks: true, //类型:Boolean 默认:false [是否保留换行] keepSpecialComments: ‘*‘ //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 }; //编译src目录下的所有less文件 //除了reset.less和test.less(**匹配src/less的0个或多个子文件夹) gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) //该任务针对的源文件 .pipe(sourcemaps.init()) //该任务调用的模块 .pipe(less()) .pipe(sourcemaps.write()) .pipe(cssmin(options)) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘})) .pipe(livereload()); .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testJs任务 gulp.task(‘testJs‘, function() { //uglify参数 var options = { mangle: true, //类型:Boolean 默认:true 是否修改变量名 compress: true, //类型:Boolean 默认:true 是否完全压缩 preserveComments: ‘all‘, //保留所有注释 mangle: { except: [‘require‘, ‘exports‘, ‘module‘, ‘$‘] } //排除混淆关键字 }; //多个文件以数组形式传入 //gulp.src([‘src/js/index.js‘,‘src/js/detail.js‘]) //该任务针对的源文件 //压缩src/js目录下的所有js文件 //除了test1.js和test2.js(**匹配src/js的0个或多个子文件夹) gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘]) .pipe(uglify(options)) //该任务调用的模块 .pipe(concat(‘bundle.js‘)) //合并后的文件名 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testRev任务 //html模板 // <!doctype html> // <html> // <head> // <link rel="stylesheet" href="css/style.css?rev=@@hash"> // <script src="js/js-one.js?rev=@@hash"></script> // <script src="js/js-two.js"></script> // </head> // <body> // <div>hello, world!</div> // <img src="img/test.jpg?rev=@@hash" /> // <script src="js/js-three.js?rev=@@hash"></script> // </body> // </html> gulp.task(‘testRev‘, function() { gulp.src(‘name.html‘) //该任务针对的源文件 .pipe(rev()) //该任务调用的模块 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testAutoFx任务 gulp.task(‘testAutoFx‘, function() { //uglify参数 var options = { browsers: [‘last 2 versions‘, ‘Android >= 4.0‘], //https://github.com/ai/browserslist#queries cascade: true, //是否美化属性值 默认:true 像这样:-webkit-transform: rotate(45deg); transform: rotate(45deg); remove: true //是否去掉不必要的前缀 默认:true }; gulp.src(‘name.css‘) //该任务针对的源文件 .pipe(autoprefixer(options)) //该任务调用的模块 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //在命令行gulp auto启动此任务 gulp.task(‘auto‘, function() { livereload.listen(); //监听文件修改,当文件修改则执行less任务 gulp.watch(‘views/less/**.less‘, [‘less‘]) }) //使用gulp.task(‘default‘)定义默认任务 //在命令行使用gulp启动后面任务 gulp.task(‘default‘, [‘testHtmlmin‘, ‘testImagemin‘, ‘testLess‘, ‘testJs‘, ‘testRev‘, ‘testAutoFx‘])

gulp运行及gulpfile.js配置

原文地址:http://www.cnblogs.com/hudeam/p/7213723.html