在sails中使用gulp代替grunt个人总结

  1. 1. 在sails中使用gulp代替grunt
    1. 1.1. 现成的依赖包: https://github.com/Karnith/sails-generate-new-gulp
    2. 1.2. 我的一些修改和添加
      1. 1.2.1. 使用 del 来删除文件/文件夹
      2. 1.2.2. html2js
      3. 1.2.3. 添加jshint
      4. 1.2.4. 添加 ng-annotate
      5. 1.2.5. 修改 sails-linker-gulp.js
      6. 1.2.6. 修改 api/register 下文件,以注册上面添加的内容
    3. 1.3. 一些个人见解
      1. 1.3.1. 使用 grunt 而不是 gulp
      2. 1.3.2. 使用 gulp 而不是 grunt
  2. 2. 参考

在sails中使用gulp代替grunt

现成的依赖包: https://github.com/Karnith/sails-generate-new-gulp

  • 首先安装依赖项
1
2
3
4
npm install -g sails-generate-backend-gulp
npm install -g sails-generate-gulpfile
npm install -g sails-generate-frontend-gulp
npm install -g sails-generate-new-gulp
  • 在工作目录下添加文件 .sailsrc
1
2
3
4
5
6
7
8
9
10
{
"generators": {
"modules": {
"new": "sails-generate-new-gulp",
"frontend": "sails-generate-frontend-gulp",
"backend": "sails-generate-backend-gulp",
"gulpfile": "sails-generate-gulpfile"
}
}
}
  • 在上面的工作目录下创建一个基于gulp的sails项目
1
sails new <project name>

比原来的sails_grunt项目,多出了文件 api/hooks/gulp/index.js(用于 sails lift时使用gulp作为默认),修改了 .sailsrcpackage.json

我的一些修改和添加

使用 del 来删除文件/文件夹

npm install --save-dev del

1
2
3
4
5
6
7
8
9
10
11
12
// 在 tasks/config 下 修改 clean.js文件
var del = require('del');

module.exports = function(gulp, plugins, growl) {
gulp.task('clean:dev', function(cb) {
return del(['.tmp/public/**/*'], cb); // 改成你的路径
});

gulp.task('clean:build', function(cb) {
return del(['deployment/**/*'], cb); // 改成你的路径
});
};

html2js

npm install --save-dev gulp-html2js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 在 tasks/config 下 新建 html2js.js文件
module.exports = function(gulp, plugins, growl) {

gulp.task('html2jsfrontend', function() {
return gulp.src(['assets/frontend/**/*.html']) // 路径需要修改
.pipe(plugins.html2js({
outputModuleName: 'Frontend', // 需要修改
base: 'assets/',
useStrict: true
}))
.pipe(plugins.concat('template-frontend.js')) // 生成的文件名
.pipe(gulp.dest('.tmp/public/frontend/')); // dest的目录
});

gulp.task('html2jsapp', function() {
return gulp.src(['assets/app/**/*.html']) // 路径需要修改
.pipe(plugins.html2js({
outputModuleName: 'App', // 需要修改
base: 'assets/',
useStrict: true
}))
.pipe(plugins.concat('template-app.js'))
.pipe(gulp.dest('.tmp/public/app'));
});

gulp.task('html2js', ['html2jsfrontend', 'html2jsapp']); // 之所以这样写,是因为gulp正确的实现异步:接收一个回调函数或者返回一个 promise 对象或者事件流(event stream)
};

添加jshint

npm install --save-dev map-stream gulp-jshint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 在 tasks/config 下 新建 jshint.js文件
var map = require('map-stream'),
events = require('events'),
emmitter = new events.EventEmitter(),
path = require('path');

var jsHintErrorReporter = function(file, cb) {
return map(function(file, cb) {
if (!file.jshint.success) {
file.jshint.results.forEach(function(err) {
if (err) {
console.log(err);
// Error message
var msg = [
path.basename(file.path),
'Line: ' + err.error.line,
'Reason: ' + err.error.reason
];

// Emit this error event
emmitter.emit('error', new Error(msg.join('\n')));
}
});
}
cb(null, file);
})
};


module.exports = function(gulp, plugins, growl) {

gulp.task('api', function() {
return gulp.src([
'api/controllers/*.js',
'api/services/**/*.js',
'api/policies/*.js',
'api/models/*.js'
])
.pipe(plugins.jshint('.jshintrc_api', {
fail: true
}))
.pipe(plugins.jshint.reporter('default')) // Console output
.pipe(jsHintErrorReporter()) // If error pop up a notify alert
.on('error', plugins.notify.onError(function(error) {
return error.message;
}));
});

gulp.task('assets', function() {
return gulp.src(['改成你的路径!!']) // 改成你的路径
.pipe(plugins.jshint('.jshintrc', {
fail: true
}))
.pipe(plugins.jshint.reporter('default')) // Console output
.pipe(jsHintErrorReporter()) // If error pop up a notify alert
.on('error', plugins.notify.onError(function(error) {
return error.message;
}));
});

gulp.task('jshint', ['api', 'assets']);
};

添加 ng-annotate

npm install --save-dev gulp-ng-annotate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 在 tasks/config 下 新建ng-annotate.js文件
var ngAnnotate = require('gulp-ng-annotate');
module.exports = function(gulp, plugins, growl) {

gulp.task('ngAnnotateapp', function() {
return gulp.src(['app/**/*.js', '*.js'], {
cwd: '.tmp/public',
base: '.tmp/public'
})
.pipe(ngAnnotate())
.pipe(gulp.dest('.tmp/public'));
});

gulp.task('ngAnnotatefrontend', function() {
gulp.src(['frontend/**/*.js', '*.js'], {
cwd: '.tmp/public',
base: '.tmp/public'
})
.pipe(ngAnnotate())
.pipe(gulp.dest('.tmp/public'));
});

gulp.task('ngAnnotate', ['ngAnnotateapp', 'ngAnnotatefrontend']);
};

修改 sails-linker-gulp.js

1
2
// 在 tasks/config 下 修改 sails-linker-gulp.js文件
// 直接仿写原来的即可

修改 api/register 下文件,以注册上面添加的内容

buildProd.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = function(gulp, plugins) {
gulp.task('buildProd', function(cb) {
plugins.sequence(
'compileAssets',
'ngAnnotate', // 添加 ngAnnotate
'concat:js',
'concat:css',
'uglify:dist',
'cssmin:dist',
'linkAssetsBuildProd',
'clean:build',
'copy:build',
cb
);
});
};

compileAssets.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = function (gulp, plugins) {
gulp.task('compileAssets', function(cb) {
plugins.sequence(
'clean:dev',
'jshint', // 添加jshint
'jst:dev',
'less:dev',
'sync:dev',
'copy:dev',
'coffee:dev',
'html2js', // 添加html2js
cb
);
});
};

一些个人见解

使用 grunt 而不是 gulp

  • grunt基于配置, 所以项目变化,修改的tasks 不多, gulp是 ‘将配置写入代码’, 所以项目切换,修改文件很多

15/08/24 update:
gulp 也可以基于配置

1
2
3
4
5
6
7
8
9
var config = require('./tasks/config.js');

gulp
.src(config.less.src, config.less.opt)
.pipe(less({
expand: true,
ext: '.css'
}))
.pipe(gulp.dest(config.less.dest));
1
2
3
4
5
6
7
8
9
10
11
12
13
// config.js
module.exports = {
'less': {
'src': [
'styles/**/*.less'
],
'opt': {
'cwd': 'static',
'base': 'static'
},
'dest': 'sites/public'
}
}
  • grunt进行大项目的jshint比gulp快的多, 所以如果需要jshint,并且文件很多,建议不要切换
  • grunt的uglify比gulp得uglify快的多得多,所以项目越大,建议不要切换
  • 不想折腾,直接官方的上

使用 gulp 而不是 grunt

  • 无法忍受 grunt 慢(每次修改前端文件,都要刷新2遍才有效果)
  • jshint单独处理或者在开发时不使用jshint
  • 小项目,而不是文件数目很多的大项目有

参考


文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG殇