标签：
首先准确说把webpack放在这儿不太好，因为webpack准确说更有点类似require，sea这类的模块化工具；而前两者更偏向于压缩混淆之类；
三者下载npm包之后，都需要各自的config文件；
grunt的congfig文件书写格式是键值，类似一种配置的编写，gulp是回掉函数，类似编程的编写；wepack的配置书写类似一种common规范；
直接代码示例：
grunt
module.exports = function (grunt) { require("load-grunt-tasks")(grunt)//这个包是加载所有所需任务，就是不需要再一个一个require
var config={ register:"public/src/register", lib:"public/lib", src:"public/src", index:"public/src/index", dest:"dist", html:"html", css:"public/css/sass/stylesheets" }//设置路径 grunt.initConfig({ config:config, pkg: grunt.file.readJSON(‘package.json‘),//这个告诉grunt吧packjson里的数据保存到pkg这个变量然后方便读取，其实这个可有可无 uglify: {//代码混淆任务 options: { banner: ‘/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ }, build: { files:{ ‘<%=config.lib%>/test.min.js‘:[‘<%=config.dest%>/test2.js‘] } } }, jshint:{//这个是让grunt自动对所书写的js进行把关 files: [‘router/*.js‘], options: { curly:true, browser: true, latedef:true, unused:true, undef:true, devel: true, node:true, jquery:true } }, cssmin:{//这个是压缩css的任务包 compress:{ files:{ ‘<%=config.css%>/index.min.css‘: ‘<%=config.css%>/index.css‘ } } }, concat:{//这个是吧文件合并的包 options: { separator: ‘;‘ }, dist: { src: [‘<%=config.src%>/index/controller/*.js‘ ], dest: ‘<%=config.dest%>/ngconfig.js‘ } }, copy:{//文件复制 dist:{ files:[{ flatten: true, filter: ‘isFile‘, expand: true, src:‘<%=config.css%>/*.css‘, dest:‘css/mycss/‘ }] } }, clean:{//文件清除 dist:{ src:"css/mycss/*" } } }); grunt.registerTask(‘default‘, [‘concat‘,‘uglify‘]);注册默认任务为先合并在混淆,注意组合任务可以继续组合
}
下面gulp配置文件示例
var gulp = require(‘gulp‘);
var htmlmin = require(‘gulp-htmlmin‘);
var cssmin= require(‘gulp-minify-css‘),imagemin = require(‘gulp-imagemin‘),clean=require(‘gulp-clean‘),
sass = require(‘gulp-ruby-sass‘);
gulp.task(‘minify‘, function() {//gulp的思路有个流的概念，类似出发点-过程-目的地这样的概念，任务名字呢可以随意
gulp.src(‘test.html‘)//这是html压缩任务
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(‘dist‘))
});
gulp.task(‘a‘, function () {//这是图片压缩任务
gulp.src(‘public/img/*.{png,jpg,gif,ico}‘)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/img‘));
});
gulp.task(‘testCssmin‘, function () {//这是css压缩任务
gulp.src(‘public/css/sass/stylesheets/index/index/*.css‘)
.pipe(cssmin({
advanced: false,
keepBreaks: false
}))
.pipe(gulp.dest(‘dist/index.min.css‘));
});
gulp.task(‘sass‘, function () {
return sass(‘public/css/sass/sass/*.scss‘)
.on(‘error‘, function (err) {
console.error(‘Error!‘, err.message);
})
.pipe(gulp.dest(‘dist/‘));
});
gulp.task(‘watch‘, function () {//这是监听文件变化任务
console.log(‘继续压死你!‘)
gulp.watch(‘src/*.html‘, [‘minify‘]);
});
gulp.task("clean",function(){//这个清除任务
gulp.src("dist/img").pipe(clean())
})
gulp.task(‘build‘,[‘testCssmin‘,‘a‘])//这是自己新建一个任务，然后依次按照dev里面的顺序进行
webpack的配置代码
var webpack = require(‘webpack‘);
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : ‘./src/js/page/index.js‘
},
//入口文件输出配置
output: {
path: ‘dist/js/page‘,
filename: ‘[name].js‘
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: ‘style-loader!css-loader‘ },
{ test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
{ test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
{ test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
]
},
//其它解决方案配置
resolve: {
root: ‘E:/github/flux-example/src‘, //绝对路径
extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
alias: {
AppStore : ‘js/stores/AppStores.js‘,
ActionType : ‘js/actions/ActionType.js‘,
AppAction : ‘js/actions/AppAction.js‘
}
}
};
标签：
原文地址：http://www.cnblogs.com/lyz1991/p/5406141.html
